import { defineConfig, loadEnv } from 'vite'
import { resolve } from 'path'

import vue from '@vitejs/plugin-vue'
import legacy from '@vitejs/plugin-legacy'
import autoprefixer from 'autoprefixer'
import postCssPxToRem from 'postcss-pxtorem'
import { visualizer } from 'rollup-plugin-visualizer'
// 引入svg插件
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import cesium from 'vite-plugin-cesium'
// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd())
  return {
    base: './',
    plugins: [
      vue(),
      // 兼容nomodule的浏览器-混合app不做兼容
      // legacy({
      //   targets: ['defaults', 'chrome 52', 'not IE 11']
      // }),
      visualizer({
        open: Boolean(env.VITE_STATS_OPEN),
        gzipSize: true, // 分析图生成的文件名
        brotliSize: true, // 收集 brotli 大小并将其显示
        filename: 'stats.html' // 分析图生成的文件名
      }),
      createSvgIconsPlugin({
        // 指定需要缓存的svg图标文件夹，即需要识别的svg都应该放在这个文件夹
        iconDirs: [resolve(__dirname, './src/img/svgs')],
        // 指定symbolId格式
        symbolId: 'icon-[dir]-[name]'
      }),
      cesium()
    ],
    server: {
      host: '0.0.0.0',
      port: 3535,
      open: false, // 运行是否自动打开浏览器
      // 设置反向代理，跨域
      proxy: {
        '/dev-api': {
          // 后台地址
          target: 'http://10.11.56.29:9900/',
          ws: true,
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/dev-api/, '/')
        },
        '/test-api': {
          target: 'https://mt.solar-grids.com/',
          ws: true,
          // 允许跨域
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/test-api/, '/hea/test')
        },
        '/api': {
          target: 'https://emp.solar-grids.com',
          ws: true,
          // 允许跨域
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, '/api')
        }
      }
    },
    resolve: {
      alias: {
        // 键必须以斜线开始和结束
        '@': resolve(__dirname, './src'),
        'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js'
      }
    },
    css: {
      preprocessorOptions: {
        // 全局样式引入
        scss: {
          additionalData: `@use "@/styles/_variables.scss" as *;`,
          javascriptEnabled: true
        }
      },
      postcss: {
        plugins: [
          autoprefixer({
            overrideBrowserslist: [
              'Android 4.1',
              'iOS 7.1',
              'Chrome > 31',
              'ff > 31',
              'ie >= 8'
            ]
          }),
          postCssPxToRem({
            // 自适应，px>rem转换
            rootValue: 37.5, // 75表示750设计稿，37.5表示375设计稿
            propList: ['*'], // 需要转换的属性，这里选择全部都进行转换
            selectorBlackList: ['norem'] // 过滤掉norem-开头的class，不进行rem转换
          })
        ]
      }
    },
    build: {
      minify: 'terser',
      terserOptions: {
        compress: {
          // 生产环境时移除console
          drop_console: true,
          drop_debugger: true
        }
      },
      rollupOptions: {
        output: {
          // 最小化拆分包
          // manualChunks(id) {
          //   if (id.includes('node_modules')) {
          //     return id
          //       .toString()
          //       .split('node_modules/')[1]
          //       .split('/')[0]
          //       .toString()
          //   }
          // },
          manualChunks: {
            'vue-i18n': ['vue-i18n'],
            'language-pack': ['./src/i18n/lang.js', './src/i18n/afterLangH5.js']
          },
          // 用于从入口点创建的块的打包输出格式[name]表示文件名,[hash]表示该文件内容hash值
          entryFileNames: 'js/[name].[hash].js',
          // 用于命名代码拆分时创建的共享块的输出命名
          chunkFileNames: 'js/[name].[hash].js',
          // 用于输出静态资源的命名，[ext]表示文件扩展名
          assetFileNames: (assetInfo) => {
            const info = assetInfo.name.split('.')
            let extType = info[info.length - 1]
            // console.log('文件信息', assetInfo.name)
            if (
              /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/i.test(assetInfo.name)
            ) {
              extType = 'media'
            } else if (/\.(png|jpe?g|gif|svg)(\?.*)?$/.test(assetInfo.name)) {
              extType = 'img'
            } else if (/\.(woff2?|eot|ttf|otf)(\?.*)?$/i.test(assetInfo.name)) {
              extType = 'fonts'
            }
            return `${extType}/[name].[hash].[ext]`
          }
        }
      }
    }
  }
})
